import React, { Component } from 'react'

export default class StudentRighrList extends Component {
    removeStudent = (index, e) => {
        e.preventDefault()
        if (window.confirm('是否删除')) {
            this.props.removeList(index)
        }
    }
    render() {
        const { studentList } = this.props
        let total = 0;
        let aver = 0;
        studentList.forEach(item => total += Number(item.age))
        // 计算平均值
        aver = Math.floor(total / studentList.length)
        return (
            <div className="col-md-6 col-md-offset-1">
                <table className="table table-striped table-hover">
                    <thead>
                        <tr>
                            <th>学号</th>
                            <th>姓名</th>
                            <th>性别</th>
                            <th>年龄</th>
                            <th>爱好</th>
                            <th>所属学院</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        {
                            studentList.map((item) => {
                                return (
                                    <tr key={item.number}>
                                        <td>{item.number}</td>
                                        <td>{item.name}</td>
                                        <td>{item.sex}</td>
                                        <td>{item.age}</td>
                                        <td>
                                            {item.hobbies.map((value, index) => {
                                                return (
                                                    <span key={index}>{value}</span>
                                                )
                                            })}
                                        </td>
                                        <td>{item.college}</td>
                                        <td>
                                            <a href="#!" onClick={(e) => { this.removeStudent(`${item.number}`, e) }}>删除</a>
                                        </td>
                                    </tr>
                                )
                            })
                        }
                    </tbody>
                </table>
                {
                    studentList.length > 0 ? null : <p className="text-center">无学生信息</p>
                }
                <p>总共有 {studentList.length} 个学生</p>
                <p>学生的平均年龄是 {aver || 0}</p>
            </div>
        )
    }
}